<script lang="ts" setup>
import { computed, getCurrentInstance } from "vue";

const props = defineProps<{
  selectedKey?: string;
}>();

const key = getCurrentInstance()?.vnode.key;

const styles = computed(() => {
  const newStyles: any = {
    border: "2px solid #f2f2f2",
  };
  if (props.selectedKey === key) {
    newStyles.border = "2px solid #007bff";
  }
  return newStyles;
});
</script>

<template>
  <umi-card :style="styles" :bordered="false">
    <template #cover>
      <umi-image :height="160"></umi-image>
    </template>
    <template #body>
      <umi-container padding="10px" direction="horizonal" justify="between" align="center">
        <umi-text :size="14">
          <slot></slot>
        </umi-text>
        <umi-space :size="6">
          <umi-icon name="browse"></umi-icon>
          <umi-icon name="move"></umi-icon>
        </umi-space>
      </umi-container>
    </template>
  </umi-card>
</template>
